<template>
    <div>
        <div class="block">
            <div style="width: 50px"></div>
            <span>请选择统计时间范围：</span>
            <el-date-picker
                    v-model="value2"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="timestamp">
            </el-date-picker>
            <el-button @click="select()" id="select">查询</el-button>
        </div>
        <div>
            <div style="display: flex;flex-direction: column;" id="echart">
                <div style="display: flex;flex-direction: row;height: 500px;">
                    <div id="main1" style="width: 33%;height: 100%;background-color: aliceblue;margin: 20px 10px"></div>
                    <div id="main2" style="width: 33%;height: 100%;background-color: aliceblue;margin: 20px 10px"></div>
                    <div id="main3" style="width: 33%;height: 100%;background-color: aliceblue;margin: 20px 10px"></div>
                </div>
                <div style="height: 50px"></div>
                <div id="main4" style="width: 100%;height: 500px;background-color: aliceblue;margin-left: 10px;"></div>
            </div>
            <div style="width:1002px;
		    display: block;
		    margin:0 auto;
">
                <h3>工单维修情况一览表</h3>
                <el-table
                        v-loading="loading"
                        :data="tableData"
                        border
                        style="width: 100%;font-size: 20px">
                    <el-table-column
                            fixed="left"
                            prop="type"
                            label="维修类别"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="acceptnum"
                            label="申报数"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="completenum"
                            label="完成数"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="percentage"
                            label="完成率"
                            width="250">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
    export default {

        data() {
            return {
                tableData: [],
                loading: false,
                chartText: [],
                chartData1: [],
                chartData2: [],
                chartData3: {
                    yAxis_data: [],
                    series_data: []
                },
                chartData4: {
                    legend_data:null,
                    xAxis_data: null,
                    series_data: []
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            var end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
                            var start = new Date(new Date().toLocaleDateString()).getTime()
                            // start.setTime(start - 3600 * 1000 * 24 * 7);
                            end = new Date(end)
                            start = new Date(start)
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三天',
                        onClick(picker) {
                            var end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
                            var start = new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 2
                            // start.setTime(start - 3600 * 1000 * 24 * 7);
                            end = new Date(end)
                            start = new Date(start)
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            var end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
                            var start = new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 6
                            // start.setTime(start - 3600 * 1000 * 24 * 7);
                            end = new Date(end)
                            start = new Date(start)
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            var end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
                            var start = new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 30
                            end = new Date(end)
                            start = new Date(start)
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            var end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
                            var start = new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 90
                            end = new Date(end)
                            start = new Date(start)
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近六个月',
                        onClick(picker) {
                            var end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
                            var start = new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 180
                            end = new Date(end)
                            start = new Date(start)
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一年',
                        onClick(picker) {
                            var end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
                            var start = new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 365
                            end = new Date(end)
                            start = new Date(start)
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '所有日期',
                        onClick(picker) {
                            var end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
                            var start = 0
                            end = new Date(end)
                            start = new Date(start)
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: ''
            };
        },
        methods: {
            drawChart() {
                //基于准备好的dom，初始化echarts实例
                var myChart1 = this.$echarts.init(document.getElementById('main1'));
                var myChart2 = this.$echarts.init(document.getElementById('main2'));
                var myChart3 = this.$echarts.init(document.getElementById('main3'));
                var myChart4 = this.$echarts.init(document.getElementById('main4'));
                var that = this
                myChart1.setOption({
                    title: {
                        text: '工单申报数',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            console.log(params)
                            return params.name + '申报数：' + params.data["value"]
                        }
                    },
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '工单申报数',
                            type: 'pie',
                            radius: [30, 130],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: this.chartData1
                        }
                    ]
                });

                myChart2.setOption({
                    title: {
                        text: '工单完成数',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            console.log(params)
                            return params.name + '完成数：' + params.data["value"]
                        }
                    },
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '工单完成数',
                            type: 'pie',
                            radius: [30, 130],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8,
                            },
                            data: this.chartData2
                        }
                    ]
                });

                myChart3.setOption({
                    title: {
                        text: '工单完成率',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            console.log(params)
                            return params.name + '完成率：' + params.data + "%"
                        }
                    },
                    legend: {
                        top: 'bottom'
                    },
                    grid:{
                        left:"15%"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {show: true}
                        }
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: this.chartData3.yAxis_data
                    },
                    series: [
                        {
                            data: this.chartData3.series_data,
                            type: 'bar',
                            itemStyle:{
                                normal:{
                                    color: function (d) {
                                        return "#" + Math.floor(Math.random() * (256*256*256-1)).toString(16);
                                    },
                                    label:{
                                        show:true,
                                        formatter: function (params) {
                                            if(params.data !== 0){
                                                return params.data + "%"
                                            }else {
                                                return ""
                                            }
                                        },
                                    }
                                }
                            }
                        }
                    ]
                });

                myChart4.setOption({
                    title: {
                        text: '各类型工单报单趋势'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: this.chartData4.legend_data
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.chartData4.xAxis_data
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: this.chartData4.series_data
                })

            },
            select() {
                var startTime = this.value2[0]
                var endTime = this.value2[1]
                var that = this
                console.log(startTime)
                console.log(endTime)
                if (startTime === undefined || endTime === undefined) {
                    that.$message.error("请选择统计时间段")
                } else {
                    that.chartData1 = []
                    that.chartData2 = []
                    that.chartData3 = {
                        yAxis_data: [],
                        series_data: []
                    }
                    that.chartData4 = {
                        legend_data :null,
                        xAxis_data: null,
                        series_data: []
                    }
                    this.loading = true
                    var token = sessionStorage.getItem("token")
                    var params = new URLSearchParams()
                    params.append('token', token)
                    params.append('startTime', startTime)
                    params.append('endTime', endTime)
                    axios.post('/admin/orderStatistical', params)
                        .then(function (response) {
                            that.loading = false
                            console.log(response)
                            if (response.data.status === 444) {
                                that.$message.error("您的登录信息已过期，请重新登录")
                                that.$router.replace("/")
                            } else if (response.data.status === 445) {
                                that.$message.error("您没有此操作权限")
                            } else {
                                that.tableData = response.data.orderStatisticalsGroupByType
                                for (var i = 0; i < response.data.orderStatisticalsGroupByType.length; i++) {
                                    var tmp1 = {
                                        value: response.data.orderStatisticalsGroupByType[i].acceptnum,
                                        name: response.data.orderStatisticalsGroupByType[i].type
                                    }
                                    var tmp2 = {
                                        value: response.data.orderStatisticalsGroupByType[i].completenum,
                                        name: response.data.orderStatisticalsGroupByType[i].type
                                    }
                                    var tmp3 = {
                                        value: parseFloat(response.data.orderStatisticalsGroupByType[i].percentage.split("%")[0]),
                                        name: response.data.orderStatisticalsGroupByType[i].type
                                    }
                                    that.chartData1.push(tmp1)
                                    that.chartData2.push(tmp2)
                                    that.chartData3.yAxis_data.push(tmp3.name)
                                    that.chartData3.series_data.push(tmp3.value)
                                }
                                that.chartData1.pop()
                                that.chartData2.pop()
                                that.chartData3.yAxis_data.pop()
                                that.chartData3.series_data.pop()

                                that.chartData4.legend_data = response.data.types;
                                that.chartData4.xAxis_data = response.data.dates;
                                for (var i = 0; i < response.data.types.length; i++) {
                                    var orderAcceptNum = []
                                    for (var j = 0; j < response.data.orderStatisticals.length; j++) {
                                        if (response.data.types[i] == response.data.orderStatisticals[j].type) {
                                            orderAcceptNum.push(response.data.orderStatisticals[j].acceptnum)
                                        }
                                    }
                                    that.chartData4.series_data.push({
                                        name: response.data.types[i],
                                        type: "line",
                                        smooth: true,
                                        data: orderAcceptNum
                                    })
                                }
                                console.log(that.chartData4)

                                that.drawChart();
                            }

                        })
                }
            }
        },
        mounted() {
            //设置初始时间默认一月
            var end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
            var start = new Date(new Date().toLocaleDateString()).getTime() - 3600 * 1000 * 24 * 30
            var valueTime = new Array()
            valueTime.push(start)
            valueTime.push(end)
            this.value2 = valueTime
            this.select()
        }
    };
</script>

<style>

</style>

